<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h2>n的值：{{numbers.n}}</h2>
			<button @click="addN">n+1</button>
		</div>
	</body>
	<script>
		const vm = new Vue({
			el:'#root',
			data(){
				return { 
					numbers:{
						n:0,
						m:10
					}
				}
			},
			methods:{
				addN(){
					this.numbers.n++
				}
			},
			watch:{
				numbers:{
					deep:true,//深度监视
					handler(){
						console.log('numbers 被修改了')
					}
				},
				
				// 'numbers.n':{
				// 	handler(){
				// 		console.log('numbers.n 被修改了')
				// 	}
				// }
				
				//watch默认不监测对象内部值的改变，deep：true可以监测对象内部改变
				// (1)Vue自身可以监测对象内部值的改变，但Vue 提供的watch默认不可以!
				// (2)使用watch时根据数据的具体结构，决定是否采用深度监视。

			}
		})
	</script>
</html>